<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="常用电话" :showHome="false"></c-nav-bar>
		<view class="mtdh">
			<view class="title">码头电话</view>
			<view class="items">
				<view v-for="(item,index) in phoneList" :key="index" @tap="callPhone(item.phone)">
					<view>
						<text>{{item.text}}</text>
						<text>{{item.phone}}</text>
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
		</view>
		<view class="jjqz">
			<view class="title">紧急求助</view>
			<view class="items">
				<view v-for="(item,index) in jjqzList" :key="index" :style="{'background-image':'url('+item.bgImg+')'}" @tap="callPhone(item.phone)">
					<text>{{item.text}}</text>
					<image :src="item.img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				jjqzList:[
					{
						bgImg:'https://i.ringzle.com/file/20240116/990473313b104cedab270993d1b7747a.png',
						text:'报警110',
						img:'https://i.ringzle.com/file/20240116/d71a37d91ea54f729ba25beae95986ad.png',
						phone:'110'
					},
					{
						bgImg:'https://i.ringzle.com/file/20240116/a20e24e2d5364741a959208c9a9e16af.png',
						text:'急救120',
						img:'https://i.ringzle.com/file/20240116/589e07785c03486ca2f10a4027dfc133.png',
						phone:'120'
					}
				],
				phoneList:[
					{text:'客服电话：',phone:'0580-5591234转9'},
					{text:'李柱山站：',phone:'0580-5078323'},
					{text:'沈家湾站：',phone:'0580-5298323'},
					{text:'小菜园站：',phone:'0580-5070342'},
					{text:'枸杞站：',phone:'0580-5211020'},
					{text:'嵊山站：',phone:'0580-5021659'},
					{text:'大洋站：',phone:'0580-5057013'}
				]
			}
		},
		methods: {
			callPhone(phoneNumber){
				uni.makePhoneCall({
					phoneNumber
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.jjqz{
			width: 100%;
			padding: 20rpx 24rpx 40rpx;
			box-sizing: border-box;
			border-top: 10rpx solid #F5F8FA;
			.title{
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-left: 8rpx;
			}
			.items{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				&>view{
					margin-top: 22rpx;
					width: calc(50% - 12rpx);
					height: 168rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					text{
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						text-shadow: 0px 1px 1px rgba(0,0,0,0.21);
					}
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
		
		.mtdh{
			width: 100%;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			.title{
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
			.items{
				margin-top: 10rpx;
				&>view{
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #EFEFEF;
					&>view{
						padding-left: 8rpx;
						display: flex;
						align-items: center;
						text{
							font-size: 30rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #333333;
							&:first-child{
								width: 150rpx;
							}
							&:last-child{
								font-size: 30rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #188FFE;
								margin-left: 7rpx;
							}
						}
					}
					&>image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>